<template>
    <div class="container-wrap" v-if="shoplist.length>0">
      <div class="product-item" v-for="(item,index) in shoplist" @click="toDetails(item)">
        <div class="product-item-left">
          <image class="product-item-left-image" :src="item.doorPhoto"></image>
        </div>
        <div class="product-item-middle">
          <div >
            <text class="product-item-middle-title">{{item.name}}</text>
          </div>
          <div v-if="item.distance">
            <text class="product-item-middle-distance">距离:{{item.distance  | distanceFormat }}km</text>
          </div>
          <div >
            <text class="product-item-middle-notice">{{item.address}}</text>
          </div>

          <div v-if="item.profitTransfer" class="product-item-middle-give-wrap">
            <div class="product-item-middle-give">
              <div class="product-item-middle-present center">
                <text class="product-item-middle-present-text">赠</text>
              </div>
              <div class="product-item-middle-certificate">
                <text class="product-item-middle-certificate">{{item.profitTransfer * 5}}%兑换券</text>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

</template>

<script>
  import {list} from "@/api/shop.js"
  import gps from "@/utils/gps";
  const eeui = app.requireModule('eeui');
  const geolocation = app.requireModule("eeui/geolocation");
  export default {
    name: '',
    data() {
      return {
        // statusBarHeight: eeui.getStatusBarHeightPx(),
        shoplist:[],
        lng:0,
        lat:0,
        pageSize: 10,
      }
    },
    created() {
      if(!this.pageNum){
        this.pageNum=1
      }
    },
    props: ['content','pageNum'],
    watch:{
      pageNum(newVal,oldVal){
        if(newVal!=oldVal&&this.newVal!=''&&newVal!=0){
          this.getNearbyShops()
        }
      }
    },
    filters:{
      distanceFormat(value) {
        var toFixedNum = Number(value).toFixed(3);
        var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
        return realVal;
      },
      number(value){
        var toFixedNum = Number(value).toFixed(0);
        return toFixedNum;
      }
    },

    mounted() {
      let _this = this;
      // geolocation.get(res =>
      // {
      //   if (res!=null && res.latitude!=null && res.longitude!=null) {
      //     let postion = gps.gcj_encrypt(res.latitude,res.longitude);
      //     _this.lat = postion.lat;
      //     _this.lng = postion.lng
      //
      //   } else {
      //     _this.lat = 24.46;
      //     _this.lng = 118.1;
      //   }
      // })
      this.getNearbyShops();

    },
    methods: {
      toDetails(item){
        eeui.openPage({
          url: 'root://pages/member/nearbyShopsDetails/nearbyShopsDetails.js',
          params: item,
          statusBarType: 'immersion',
          statusBarStyle: false
        });
      },
      getNearbyShops(){
        var _this = this
        if(this.pageNum==1){
          _this.productList=[]
        }
        let param = {
          // lat: this.lat,
          // lng: this.lng,
          lat: 24.46,
          lng: 118.1,
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          status:1
        }
        console.warn("111111111111111111111111")
        console.warn(this.lat,this.lng)
        console.warn("22222222222222222222222222222222")

        list(param).then(res=>{
          res.data.forEach(function (item) {
            item.doorPhoto = _this.thumbnail(item.doorPhoto, 120, 120)
            _this.shoplist.push(item)
          })

          // this.shoplist = res.data

          // res.data.data.forEach(item=>{
          //   item.thumbnail = _this.thumbnail(item.thumbnail, 350, 360)
          //   _this.productList.push(item)
          // })
        })
      }
    },
  }
</script>
<style scoped>
.navbar {
  width: 750px;
  height: 100px;
}
.text {
  font-size: 36px;
}
.status-bar {
  background-color: white;
}
.iconLeft{
  color: black;
  font-size: 30px;
  padding-left: 30px;
  padding-right: 30px;
  font-family: iconfont2;
}

.container-wrap{
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
}
.header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
}
.header-search{
  display: flex;
  flex-direction: row;
  align-items: center;

  width: 620px;
  border-radius: 20px;
  background-color: #efefef;
}
.header-search-image{
  padding-left: 10px;
  width:50px;
  height: 50px;
  /*background-color: yellow;*/
}
.header-search-input{
  padding-top: 15px;
  padding-bottom: 15px;
}
.header-nav-image{
  width: 30px;
  height: 30px;
  background-color: pink;
}
.classification{
  display: flex;
  flex-direction: row;
  padding-top: 28px;
  padding-bottom: 28px;
}
.classification-left{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 345px;
  border-right-color: #e0e0e0;
  border-right-style: solid;
  border-right-width: 1px;

}
.product-item-middle{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 450px;
  height: 180px;
}
.product-item-middle-title{
  font-weight: bold;
  font-size: 30px;
  color: #000000;
  text-overflow:ellipsis;
  lines:1;
}
.product-item-middle-distance{
  font-size: 24px;
  color: #000000;
  text-overflow:ellipsis;
  lines:1;

}
.product-item-middle-notice{
  font-size: 24px;
  color:#bdbdbd;
  color: #000000;
  /*overflow: hidden;*/
  text-overflow:ellipsis;
  /*white-space: nowrap;*/
  lines:1;

}
.product-item-middle-contain{
  padding-top: 30px;
  font-size: 30px;
  color:#868686;
}
.classification-right{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 345px;
}
.classification-left-text{
  letter-spacing: 3px;
  font-size:30px;
  color:#a0a0a0;
}
.classification-left-image{
  padding-left: 3px;
  width: 20px;
  height: 20px;
  background: pink;
}
.classification-right-image{
  padding-left: 3px;
  width: 20px;
  height: 20px;
  background: pink;
}
.classification-right-text{
  letter-spacing: 3px;
  font-size:30px;
  color:#a0a0a0;
}
.container-wrap-border{
  border: 1px solid #e0e0e0;
  margin-right: 0px;
  margin-left:0px;
  padding-left: 30px;
  padding-right: 30px;
}
.product-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  /*margin-bottom: 20px;*/

  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-color: #BEBEBE;
  padding-bottom: 10px;
  padding-top: 10px

}
.product-item-left{
  padding-right: 30px;
}
.product-item-left-image{
  /*width: 160px;*/
  /*height: 160px;*/
  width: 180px;
  height: 180px;
  background-color: pink;
  border-radius: 16px;
}
.banner-wrap{
  margin-right: 0px;
  margin-left:0px;
  /*padding-left: 30px;*/
  /*padding-right: 30px;*/
}
.banner{
  /*background-color: yellow;*/
}
.verification_input {
  padding-left: 10px;
  width: 480px;
  height: 80px;
  font-size: 28px;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 48px;
  opacity: 0.4;
}
.product-item-right{
  width: 180px;
}

.center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-item-middle-give-wrap{
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
}
.product-item-middle-give{
  display: flex;
  flex-direction: row;

  height: 38px;

  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;

  border-top-style: solid;
  border-top-width: 2px;
  border-top-color:#ff8400;

  border-left-style: solid;
  border-left-width: 2px;
  border-left-color:#ff8400;

  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color:#ff8400;

  border-right-style: solid;
  border-right-width: 2px;
  border-right-color:#ff8400;
}
.product-item-middle-present-text{
  font-size:26px;
  color: white;
}
.product-item-middle-certificate{
  margin-left: 5px;
  margin-right: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size:26px;
  color:#ff8400;
}
.product-item-middle-present{
  width:38px;
  height:38px;
  background-color:#ff8400;
}




</style>

